<template>
    <div class="warp">
        <el-row class="form-query-box">
            <el-col :span="20" class="form-query">
                <el-form ref="form" :model="formQuery" size="mini">
                    <el-col :span="6">
                        <el-form-item label="大类：" label-width="80px">
                            <el-input v-model="formQuery.category"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="小类：" label-width="80px">
                            <el-input v-model="formQuery.subCategory"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="姓名：" label-width="80px">
                            <el-input size="mini" v-model="formQuery.userName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="职称：" label-width="100px">
                            <el-input size="mini" v-model="formQuery.jobTitle"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" class="dateTime">
                        <el-form-item label="受理时间：" label-width="100px">
                            <el-date-picker
                                    v-model="formQuery.approveTime"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-col>
            <el-col :span="2" :offset="2" class="query-bar">
                <el-button type="primary" @click="getFindApplyRecordList(1)" size="small" round>查询</el-button>
            </el-col>
        </el-row>
        <el-row class="content">
            <div class="minTile">
                <div class="title-text"><span class="line"></span>
                    <p>职称申报人员信息表</p></div>
                <!--<el-button class="refresh-bar" type="primary" size="mini" round icon="el-icon-refresh-right">刷新-->
                <!--</el-button>-->
            </div>
            <div class="content-table">
                <el-table
                        :data="tableData"
                        border
                        size="mini"
                        style="width: 100%"
                        header-row-class-name="table-header">
                    <el-table-column
                            prop="categoryId"
                            label="大类"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="categoryChildId"
                            label="小类"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="categoryAcademicId"
                            label="职称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="userName"
                            label="姓名"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="初审（电脑）"
                            align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.firstApproveStatus == 0" style="color: #FF2222">未通过</span>
                            <span v-else-if="scope.row.firstApproveStatus == 1">已通过</span>
                            <span v-else>评审中</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="firstApproveTime"
                            label="初审时间（电脑）"
                            width="135"
                            align="center">
                    </el-table-column>
                    <!--<el-table-column-->
                            <!--label="详情"-->
                            <!--align="center">-->
                        <!--<template slot-scope="scope">-->
                            <!--<el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <el-table-column label="人工评审" align="center">
                        <template  slot-scope="scope">
                            <el-button type="primary" @click="handleReview(scope.row)" size="mini" round>评审</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total,prev, pager, next"
                        @current-change="handleCurrentPage"
                        :total="total">
                </el-pagination>
            </div>
        </el-row>
    </div>
</template>

<script>
    import { findApplyRecordList } from '@/service/api'
    import Qs from 'qs'
    export default {
        name: "pendingReviews",
        data() {
            return {
                formQuery: {
                    category: '', //大类
                    subCategory: '', //小类
                    userName: '', //姓名
                    jobTitle: '', //职称
                    approveTime: '', //受审时间
                },
                options: [
                    {value: '0', label: '未通过'},
                    {value: '1', label: '已通过'},
                    {value: '2', label: '审批中'},
                ],
                total: 0,
                tableData: []
            }
        },
        created() {
            this.getFindApplyRecordList(1);
        },
        methods:{
            getFindApplyRecordList(pageNum){
                console.log(this.formQuery)
                let params = {
                    category: this.formQuery.category,
                    subCategory: this.formQuery.subCategory,
                    userName: this.formQuery.userName,
                    jobTitle: this.formQuery.jobTitle,
                    approveTime: this.formQuery.approveTime, //受审时间
                    pageNum:pageNum,pageSize:10,
                    queryType:'2'
                };
                findApplyRecordList(Qs.stringify(params)).then(res => {
                    if(res.code == 200){
                        console.log(res)
                        this.tableData = res.data.list;
                        this.total = res.data.count;
                    }else {
                        console.log(res)
                    }
                });
            },
            handleCurrentPage(e) {
                console.log(e)
                this.getFindApplyRecordList(e)
            },
            handleClick(e){
                console.log(e)
            },
            handleReview(e){
                console.log(e)
                this.$router.push({name:"reviewsInfo",params:{id:e.id}});
            }
        }
    }
</script>

<style scoped>
    .warp {
        /*width: 100%;*/
        /*height: 100%;*/
        /*overflow: hidden;*/
        height: 100%;
        background: #F4F1F4;
    }

    .form-query-box {
        height: 100px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
        border-radius: 5px;
        margin-bottom: 18px;
        /*overflow: hidden;*/
    }

    .set-padding >>> .el-input__inner {
        padding-right: 40px;
    }

    .form-query {
        margin-top: 14px;
    }

    .query-bar {
        margin-top: 30px;
    }

    .query-bar >>> .el-button {
        width: 80px;
    }

    .content {
        width: 100%;
        min-height: 520px;
        height: auto;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
        border-radius: 5px;
        overflow: hidden;
    }

    .minTile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f5f8fe;
        margin: 13px 25px;
    }

    .minTile > .title-text {
        display: flex;
        align-items: center;
        color: #417FFE;
        font-size: 12px;
        padding: 13px 18px;
    }

    .minTile .line {
        display: block;
        width: 3px;
        height: 12px;
        background: #417FFE;
        margin-right: 9px;
    }

    .refresh-bar {
        margin-right: 16px;
        padding: 7px 10px !important;
    }

    .content-table {
        margin: 13px 25px;
        border-radius: 5px 5px 0px 0px;
        overflow: hidden;
    }

    .content-table >>> .table-header th {
        background: #E6EAEB !important;
        border: none;
    }
    .content-table >>> .table-header th div{
        font-weight:bold !important;
        color: #333;
    }

    .content-table >>> tbody tr:nth-child(even) td {
        background: #F5F8FE;
    }

    .content-table >>> tbody .el-button {
        padding: 5px 15px;
    }
    .pagination{
        margin-top: -6px;
        text-align: end;
        padding-right: 16px;
    }
    .dateTime >>> .el-date-editor.el-input{
        width: auto;
    }
</style>
